<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <el-form :model="formData" ref="formData" :rules="rules" label-width="100px" style="margin-top: 5%">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户名" prop="userName">
                        <el-input v-model="formData.userName" size="small" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="姓名" prop="realName">
                        <el-input size="small" v-model="formData.realName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="formData.sex" size="small">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="出生日期" prop="birthDate">
                        <el-date-picker size="small" v-model="formData.birthDate" type="date" placeholder="选择日期" style="width:100%"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="手机号码" prop="phone">
                        <el-input  size="small" v-model="formData.phone" maxlength="11"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="地址" prop="address">
                        <el-input size="small" v-model="formData.address"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="角色" prop="roleId">
                        <el-select v-model="formData.roleId" multiple placeholder="请选择" style="width:100%" size="small">
                            <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="岗位" prop="postId">
                        <el-select v-model="formData.postId"  placeholder="请选择" style="width:100%" size="small">
                            <el-option  v-for="item in postList" :key="item.id" :label="item.postName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="text-align: center;margin-top: 5%">
            <el-button size="small" @click="closePage">取 消</el-button>
            <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    let id = getQueryString("id");
    new Vue({
        el: '#app',
        data() {
			return {
                formData: {
                    id: '',
                    userName: '',
                    realName: '',
                    sex: '',
                    birthDate: '',
                    phone: '',
                    roleId: [],
                    postId:"",
                    province: '',
                    city: '',
                    area: '',
                    address: ''
                },
                postList:[],
                rules: {
                    userName: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    realName: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请选择', trigger: 'blur'}
                    ],
                    birthDate: [
                        {required: true, message: '请选择', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 11, max: 11, message: '手机号码格式不正确', trigger: 'blur'}
                    ]
                },
                roleList: [],
                regionList: []
			}
        },
        created() {
			requests.post('/sys/role/all')
            .then((res) => {
                if (res.code === '200') {
                    this.roleList = res.data;
                }
            });
            requests.get('/sys/post/list')
                .then((res) => {
                    if (res.code === '200') {
                        this.postList = res.data;
                    }
                });
            requests.get('/sys/user/get/' + id)
            .then((res) => {
                if (res.code === '200') {
                    this.formData= res.data
                }
            });
        },
        methods: {
            handleSubmit() {
                addOrUpdate('/sys/user/update', this);
            }
        }
    });
</script>
</html>
